<template>
    <div :class="`status-message ${type}`">
        <p>{{ message }}</p>
        <slot></slot>
    </div>
</template>

<script setup lang="ts">
defineProps({
    message: {type: String, required: true},
    type: {type: String, default: "info"}, // 支持 info, success, error, warning
});
</script>

<style scoped>
.status-message {
    padding: 15px;
    border-radius: 8px;
    margin: 10px 0;
}

.status-message.info {
    background-color: #e9f7ef;
    color: #31708f;
}

.status-message.success {
    background-color: #dff0d8;
    color: #3c763d;
}

.status-message.error {
    background-color: #f2dede;
    color: #a94442;
}

.status-message.warning {
    background-color: #fcf8e3;
    color: #8a6d3b;
}
</style>
